import Taro, {Component} from '@tarojs/taro'
import { View, Icon, Input, Image, Text, Textarea, Picker, Button, Label, Checkbox} from '@tarojs/components'
import { connect } from '@tarojs/redux'
import styles from './index.module.scss'
import { getContractList } from '@/api'
import { dialog} from '@/util';
import NoData from "@/components/NoData"
import { setUrl } from '@/actions/web'
import {PDF_URL} from '@/api/config';

@connect(({user}) => ({
  info: user.info,
}), dispatch => ({
  setUrl: (data) => dispatch(setUrl(data)),
}))
export default class ContractList extends Component {

  config = {
    navigationBarTitleText: '合同信息'
  }

  state = {
    list: [],
    statusObj: {
      '1': { name: '平台签约' },
      '2': { name: '任务签约' },
    }
  }

  componentWillMount = () => {
    this.getList();
  }

  getList = async () => {
    const { info } = this.props;
    try {
      Taro.showLoading({mask: true, title: '数据加载中...'})
      const { data } = await getContractList({ loginAccount: info.mobile })
      Taro.hideLoading()
      this.setState({list: data})
    } catch(e) {
      dialog.toast({title: e.message});
    }
  }

  goDetail = (item) => {
    let _this = this
    Taro.showLoading({mask: true, title: '文件打开中.'})
    wx.getSystemInfo({
      success (res) {
        if (res.system.indexOf('iOS') != -1) {
          _this.props.setUrl(item.path)
        } else {
          _this.props.setUrl(PDF_URL + item.path)
        }
        Taro.hideLoading()
        Taro.navigateTo({url: '/pages/web/index?title=' + item.name})
      }
    })
  }

  render () {
    let { list, statusObj } = this.state;
    return (
      <View className={styles.wrapper}>
        <View className={styles.headWrap}>
          <View className={styles.hint}>提示：该页面展示您和众包平台所有的签约合同</View>
        </View>
        <View className={styles.waitWrap}>
          {
            (list && list.length>0) ? list.map((item, index)=>{
            return(
              <View className={styles.order} key={index + ''} onClick={() => this.goDetail(item)}>
                <View className={styles.nameWrapper}>
                  <View className={styles.name}>{item.name}</View>
                </View>
                <View className={styles.item}>
                  <Text className={styles.label}>签约类型：</Text>
                  <Text className={styles.value}>{statusObj[item.type].name}</Text>
                </View>
                <View className={styles.item}>
                  <Text className={styles.label}>签约时间：</Text>
                  <Text className={styles.value}>{item.time}</Text>
                </View>
                {item.type === '2' && <View className={styles.item}>
                  <Text className={styles.label}>所属商户：</Text>
                  <Text className={styles.value}>{item.merchantName}</Text>
                </View>}
                {item.type === '2' && <View className={styles.item}>
                  <Text className={styles.label}>任务时间：</Text>
                  <Text className={styles.value}>{item.taskTime}</Text>
                </View>}
              </View>
            )
          }) : <NoData></NoData>
        }
        </View>
      </View>
    )
  }
}
